<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input {
            position: absolute;
            opacity: 0;
        }
        label {
            position: absolute;
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            background: none;
            cursor: pointer;
        }
        label .area {
            position: fixed;
            top: 1em;
            left: 1em;
            z-index: 3;
            width: 2em;
            height: 2em;
            margin: 0;
            padding: 0;
            -webkit-transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        label .area::before,
        label .area .bar,
        label .area::after {
            position: absolute;
            left: 0;
            /* width for transition */

            display: block;
            width: 100%;
            height: 12%;
            background: white;
            content: '';
            -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        label .area .bar {
            top: 44%;
        }
        label .area::before {
            top: 0;
            -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
            transform-origin: top left;
        }
        label .area::after {
            bottom: 0;
            -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
            transform-origin: bottom left;
        }
        input:focus + label .area,
        label:hover .area {
            opacity: 0.7;
        }
        nav {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 2;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: column nowrap;
            -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            -ms-flex-align: start;
            align-items: flex-start;
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        nav::before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            width: 40em;
            background: #d62956;
            content: '';
            -webkit-transform: skewX(15deg) translateX(-100%);
            -ms-transform: skewX(15deg) translateX(-100%);
            transform: skewX(15deg) translateX(-100%);
            -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
            transform-origin: bottom left;
            -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        nav a {
            margin: 0.5em 0;
            padding: 0.2em 2em;
            font-size: 1.5em;
            color: white;
            text-decoration: none;
            font-weight: 500;
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: color 0.15s, -webkit-transform 0.5s;
            transition: color 0.15s, transform 0.5s;
            -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
        }
        nav a:nth-child(1) {
            -webkit-transition-delay: 0s, 100ms;
            transition-delay: 0s, 100ms;
        }
        nav a:nth-child(2) {
            -webkit-transition-delay: 0s, 150ms;
            transition-delay: 0s, 150ms;
        }
        nav a:nth-child(3) {
            -webkit-transition-delay: 0s, 200ms;
            transition-delay: 0s, 200ms;
        }
        nav a:nth-child(4) {
            -webkit-transition-delay: 0s, 250ms;
            transition-delay: 0s, 250ms;
        }
        nav a:nth-child(5) {
            -webkit-transition-delay: 0s, 300ms;
            transition-delay: 0s, 300ms;
        }
        nav a:nth-child(6) {
            -webkit-transition-delay: 0s, 350ms;
            transition-delay: 0s, 350ms;
        }
        nav a:hover,
        nav a:focus {
            color: black;
        }
        main {
            -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        [id="navcheck"]:checked + label::before {
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 62, 80, 0.6);
            content: '';
        }
        [id="navcheck"]:checked + label .area::before,
        [id="navcheck"]:checked + label .area::after {
            width: 141.42%;
        }
        [id="navcheck"]:checked + label .area::before {
            -webkit-transform: rotate(45deg) translateY(-50%);
            -ms-transform: rotate(45deg) translateY(-50%);
            transform: rotate(45deg) translateY(-50%);
        }
        [id="navcheck"]:checked + label .area::after {
            -webkit-transform: rotate(-45deg) translateY(50%);
            -ms-transform: rotate(-45deg) translateY(50%);
            transform: rotate(-45deg) translateY(50%);
        }
        [id="navcheck"]:checked + label .area .bar {
            -webkit-transform: scale(0.1);
            -ms-transform: scale(0.1);
            transform: scale(0.1);
        }
        [id="navcheck"]:checked ~ nav {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        [id="navcheck"]:checked ~ nav::before {
            -webkit-transform: skewX(15deg) translateX(0);
            -ms-transform: skewX(15deg) translateX(0);
            transform: skewX(15deg) translateX(0);
        }
        [id="navcheck"]:checked ~ nav a {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        [id="navcheck"]:checked ~ main {
            -webkit-transform: translateX(3em);
            -ms-transform: translateX(3em);
            transform: translateX(3em);
            -webkit-transform-origin: left center;
            -ms-transform-origin: left center;
            transform-origin: left center;
            -webkit-filter: blur(1px);
            filter: blur(1px);
        }
        .visuallyhidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            /* misc */

            width: 1px;
        }
        body {
            overflow-x: hidden;
            background: #444;
            color: white;
            font: 1em/1.4 "open sans";
            font-weight: 300;
        }
        main {
            background: #3498db;
            padding: 5% 0;
        }
        article {
            width: 50%;
            margin: 0 auto;
            font-size: 1.3em;
        }
    </style>
</head>
<body>
<input type="checkbox" id="navcheck" role="button" title="menu">
<label for="navcheck" aria-hidden="true" title="menu">
    <span class="area">
		<span class="bar">
			<span class="visuallyhidden">Menu</span>
    </span>
    </span>
</label>
<nav id="menu">
    <a href="#">Lorem.</a>
    <a href="#">Nesciunt!</a>
    <a href="#">Magnam.</a>
    <a href="#">Ipsum.</a>
    <a href="#">Voluptatem.</a>
    <a href="#">Quibusdam.</a>
</nav>
<main>
    <article>
        <header>
            <h1>Lorem ipsum dolor sit amet.</h1>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum asperiores, minima obcaecati ex iusto alias minus excepturi sunt! Asperiores quibusdam iure numquam quis dicta at quisquam debitis minima perspiciatis modi?</p>
        <p>Asperiores impedit neque porro, minus cum. Nesciunt blanditiis, dolorum explicabo esse voluptates voluptas doloribus, vero voluptate veniam impedit nam doloremque unde inventore ipsum iste magnam perferendis assumenda in sunt deleniti.</p>
        <p>Cum quidem eum quos provident placeat aut tempore rem voluptates eveniet? Eos impedit aspernatur hic tenetur ipsum tempora exercitationem libero voluptas numquam necessitatibus. Error quisquam quaerat debitis suscipit velit dolore.</p>
        <p>Atque, ab libero! Cum quae cumque voluptate culpa accusantium iste aliquam illum quos facere quisquam, delectus, magnam neque dicta quibusdam libero itaque dolorem, tenetur vel dolores laudantium ratione asperiores voluptatibus.</p>
        <p>Fugiat praesentium omnis maiores atque sed perspiciatis quia laboriosam! Eius mollitia iusto quia libero, voluptate laborum labore ducimus beatae, quisquam, dicta laboriosam culpa voluptatem impedit maxime, a ex pariatur dignissimos.</p>
        <p>Dolores odio dolore quo? Autem iure dolorem ratione, odit reiciendis. Non pariatur voluptates, explicabo vitae, rem molestias in. Voluptates expedita iusto blanditiis commodi numquam. Hic atque natus dolore cupiditate velit.</p>
        <p>Ipsam ipsum quos, quibusdam nulla commodi dolorem impedit soluta odio natus. Ullam dolor consequatur tenetur similique cupiditate debitis natus tempore molestiae quo, inventore in quia earum explicabo eaque qui facilis.</p>
        <p>Iure, natus. Ipsam officia nostrum minima ut blanditiis asperiores neque esse itaque reprehenderit, et, porro ea nemo eligendi cum soluta fuga similique? Soluta, nam odio praesentium quas officia repellendus dicta.</p>
        <p>Modi voluptates, doloremque aliquam. Magnam numquam fugit aliquam veniam officiis iusto et assumenda cupiditate aspernatur voluptas expedita quo voluptatibus repudiandae, sapiente molestias, culpa eos placeat possimus quae! Aliquid dicta, atque?</p>
        <p>Laborum magni ipsam iure iste blanditiis saepe. Optio obcaecati quaerat soluta, vitae. Asperiores reiciendis minima, quidem iusto explicabo culpa quaerat atque! Cum nesciunt nam ducimus mollitia iste sapiente sit, eos.</p>
    </article>
</main>
</body>
</html>